<template>
  <div class="template_box">
    <!--    查询-->
    <div class="template_search">
      <div class="template_search_box">
        <div class="title">设备型号：</div>
        <a-input disabled v-model:value="device_number" placeholder="请输入搜索内容"/>
      </div>
      <div class="template_search_box">
        <div class="title">设备型号：</div>
        <a-input disabled v-model:value="device_type_number" placeholder="请输入搜索内容"/>
      </div>
      <div class="template_search_box">
        <div class="title">数采终端编号：</div>
        <a-input disabled v-model:value="terminal_number" placeholder="请输入搜索内容"/>
      </div>
      <div class="template_search_box">
        <a-button style="margin-right: 10px" type="primary" disabled>查询</a-button>
        <a-button type="primary" disabled>重置</a-button>
      </div>
    </div>
    <!--    列表-->
    <div class="template_table">
      <div class="template_add_btn">
        <a-button style="margin-right: 0.2rem" type="primary" @click="add_device_func">新增</a-button>
        <a-button type="primary" @click="re_flash">刷新</a-button>
      </div>
      <a-table :pagination="false" bordered :dataSource="device_person.data_list" :columns="columns">
        <template v-for="col in ['userId']"
                  #[col]="{ text, record }" :key="col">
          <div>
            <a-select
                v-if="editableData[record.key]"
                v-model:value="editableData[record.key][col]"
                style="width: 100%;margin: -5px 0"
                ref="select"
            >
              <a-select-option v-for="(item,index) in store.state.user.user_list" :key="index" :value="item.userId">{{
                  item.realName
                }}
              </a-select-option>
            </a-select>
            <template v-else>
              {{ handle_user_id(text) }}
            </template>
          </div>
        </template>
        <template v-for="col in ['className']"
                  #[col]="{ text, record }" :key="col">
          <div>
            <a-select
                v-if="editableData[record.key]"
                v-model:value="editableData[record.key].cId"
                style="width: 100%;margin: -5px 0"
                ref="select"
            >
              <a-select-option v-for="(item,index) in device_person.class_name_list" :key="index" :value="item.cId">{{
                  item.className
                }}
              </a-select-option>
            </a-select>
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <template v-for="col in ['equipmentCode', 'uEquipmentCode']"
                  #[col]="{ text, record }" :key="col">
          <div>
            <a-input
                v-if="editableData[record.key]"
                v-model:value="editableData[record.key][col]"
                style="margin: -5px 0"
            />
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <template #operation="{ record }">
          <a-popconfirm
              v-if="device_person.data_list.length && !statusObject.edit_status"
              title="确认删除当前么?"
              okText="确认"
              cancelText="取消"
              @confirm="onDelete(record.key)"
          >
            <a :style="{color:'red'}">删除</a>
          </a-popconfirm>
          <span v-if="device_person.data_list.length">
              <span v-if="editableData[record.key]">
                <a-popconfirm title="确认提交?"
                              okText="确认"
                              cancelText="取消"
                              @confirm="save(record.key)">
                  <a>保存</a>
                </a-popconfirm>
                <a-popconfirm title="确认执行取消操作?"
                              okText="确认"
                              cancelText="取消"
                              @confirm="cancel(record.key)">
                  <a>取消</a>
                </a-popconfirm>
              </span>
              <span v-else>
                <a @click="edit(record.key)">编辑</a>
              </span>
            </span>
        </template>
      </a-table>
      <a-pagination v-if="pageObject.total>10" style="margin-top: 10px" v-model:current="pageObject.currentPage"
                    :total="pageObject.total"
                    @change="changePage"/>
    </div>
    <add_person_device @re_flash:re_flash="re_flash"/>
  </div>
</template>

<script>
import {defineComponent, ref, reactive} from 'vue';
import {edit_p_class, get_p_class_o} from "@/api/device/device_person"
import {message} from "ant-design-vue";
import {handle_key} from "@/utils/handle_key";
import {cloneDeep} from "lodash-es";
import {editEquipment} from "@/api/device/device";
import {get_user_list_all} from "@/api/user"
import {useStore} from "vuex";
import add_person_device from "@/views/device/add/add_person_device";
import {get_ClassSet_all} from "@/api/team";


export default defineComponent({
  // name: "WorkpieceInformation";
  name: "essential",
  props: {},
  setup() {
    const store = useStore()
    const dataSource = [];
    const columns = [
      {
        title: '序号',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: '设备编号',
        dataIndex: 'equipmentCode',
        key: 'equipmentCode',
        slots: {
          customRender: 'equipmentCode',
        },
      },
      {
        title: '班次',
        dataIndex: 'className',
        key: 'className',
        slots: {
          customRender: 'className',
        },
      },
      // {
      //   title: '时间',
      //   dataIndex: 'address',
      //   key: 'address',
      // },
      {
        title: '负责人',
        dataIndex: 'userId',
        key: 'userId',
        slots: {
          customRender: 'userId',
        },
      },
      // {
      //   title: '首次开机容许偏差',
      //   dataIndex: 'address',
      //   key: 'address',
      // },
      {
        title: '数采终端编号',
        dataIndex: 'uEquipmentCode',
        key: 'uEquipmentCode',
        slots: {
          customRender: 'uEquipmentCode',
        },
      },
      {
        title: '操作',
        dataIndex: 'edit',
        key: 'edit',
        slots: {
          customRender: 'operation',
        },
      },
    ];
    const device_number = ref('')
    const device_type_number = ref('')
    const terminal_number = ref('')
    /**
     * 编辑的参数
     *
     * */
    const edit_params = reactive({
      "id": 0,
      "uEquipmentCode": "",
      "equipmentCode": "",
      "cId": 0,
      "userId": 0,
      "createTime": "",
      "updateTime": "",
      "createUserId": 0,
      "updateUserId": 0
    })
    /**
     * status
     *
     * */
    const statusObject = reactive({
      edit_status: false
    })
    /**
     * 编辑
     *
     * */
    const editableData = reactive({});
    const pageObject = reactive({
      currentPage: 1,
      total: 10,
      pageIndex: 1
    });
    /**
     * 请求参数
     * */
    const device_person = reactive({
      params: {
        "pageIndex": pageObject.pageIndex,
        "pageSize": 10,
        "id": 0,
        "searchValue": "",
        "searchBeginTime": "",
        "searchEndTime": "",
        "field": "",
        "order": "",
        "where": ""
      },
      data_list: [],
      class_name_list: []
    });
    //获取分页数据
    const changePage = (e) => {
      // console.log(e)
      pageObject.pageIndex = e
      device_person.params.pageIndex = e;
      get_list()
    };

    //列表删除确认
    const onDelete = key => {
      dataSource.value = dataSource.value.filter(item => item.key !== key);
    };
    //获取数据列表
    const get_list = async () => {

      const res = await get_p_class_o(device_person.params)
      console.log(res)
      if (res.code === 1) {
        device_person.data_list = handle_key(res.data.items)
        pageObject.total = res.data.totalItems
        return
      }
      message.warning(res.message)
    }

    const edit = key => {
      editableData[key] = cloneDeep(device_person.data_list.filter(item => key === item.key))[0];
      // debugger
      statusObject.edit_status = true;
    };
    const save = async key => {
      /*
      * 修改之后的参数
      * */
      edit_params.id = device_person.data_list[key].id;
      edit_params.uEquipmentCode = editableData[key].uEquipmentCode;
      edit_params.equipmentCode = editableData[key].equipmentCode;
      edit_params.userId = editableData[key].userId;
      edit_params.cId = editableData[key].cId;
      const res = await edit_p_class(edit_params)
      console.log(res)
      if (res.code === 1) {
        delete editableData[key];
        statusObject.edit_status = false
        message.success("修改成功")
        get_list()
        return
      }
      message.warning(res.message)

    };

    const cancel = key => {
      delete editableData[key];
      statusObject.edit_status = false
    };
    /**
     * 获取班组的信息列表
     * */
    const get_class_name = async () => {
      const res = await get_ClassSet_all()
      if (res.code === 1) {
        device_person.class_name_list = res.data
        store.commit("SET_TEAM_LIST", res.data)
      }
    }


    const init = () => {
      //获取班组的列表
      get_class_name()
      //获取列表
      get_list();

    }

    /**
     *
     *
     * */
    const handle_user_id = (user_id) => {
      try {
        console.log(store.state.user.user_list)
        const data = store.state.user.user_list.filter((item) => item.userId == user_id);
        return data[0].realName
      } catch (e) {
        console.log("数据解析异常")
        return ""
      }

    }
    /**
     * 刷新
     * */
    const re_flash = () => {
      init()
    }

    /**
     * 新增
     * */
    const add_device_func = () => {
      store.commit("SET_ADD_ROLE", true)
    }


    /**
     * 数据初始化
     *
     * */
    init();

    return {
      device_number,
      device_type_number,
      terminal_number,
      dataSource,
      columns,
      pageObject,
      device_person,
      handle_user_id,
      onDelete,
      changePage,
      editableData,
      statusObject,
      edit,
      save,
      cancel,
      store,
      re_flash,
      add_device_func
    };
  },
  components: {
    add_person_device
  }
});

</script>

<style scoped lang="scss">
.template_box {
  display: flex;
  flex-direction: column;
  font-size: 0.5rem;

  .template_search {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;

    .template_search_box {
      display: flex;
      flex-direction: row;
      width: 25%;
      justify-content: center;

      .title {
        width: 8rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .template_table {
    .template_add_btn {
      margin-bottom: 0.5rem;
      display: flex;
      justify-content: flex-start;
    }
  }
}
</style>
